1
Select and move elements
Click elements on the canvas to select them, or use the HTML element tree on the left. You can also click and drag elements on the canvas or in the element tree to move them around.
Welcome to
The Nordcraft Coloring book
This page is your playground. Use it to help you explore Nordcraft and how it works. Every headline, button, and image can be styled, colored, and reshaped. Try it out! Change this text’s font, swap its color, or make it bigger using the style panel.
You can’t break anything, so have fun experimenting.
How it works
The Coloring Book
This isn’t a finished landing page: it’s a sandbox.
Each section on this page is here to help you learn, experiment, and play with Nordcraft. You’ll find headlines, paragraphs, buttons, images, cards, and different layouts, all ready for you to transform.
2
Edit styles and attributes
Use the style panel on the right to change colors, fonts, and sizes. Add animations to elements using the animation editor in the style panel. You can also set HTML element attributes or trigger events.
3
Insert and explore
Use the bottom bar to add new elements to the page, toggle test mode, and preview the project in a new browser tab. Click the Ask AI button to get help on using Nordcraft and building for the web.
Inspiration
Tips and tricks
Not sure where to start? Here are a few tips to help you get going.
Make Your Headline Shine
Style the main headline by adjusting color, font, weight, size, spacing, line height, and alignment. Try new fonts via the theme editor in the project sidebar (CMD/CTRL + K).
Turn Buttons into Invitations
Make buttons stand out with color, shadows, and hover effects; add hover via Style (+). Use solid fills, outlines, or gradients; add soft shadows and responsive hover states like color shifts or subtle transforms.
Paint the Page Background
Set a strong background with images, solid colors, or gradients; keep contrast high. Upload images via the style panel’s background dialog to add texture and patterns.
Responsive by Design
Use responsive grids, percentage widths, and scale type/spacing with responsive units. Stack columns on smaller breakpoints so layouts adapt across screen sizes.
Build More, Learn Faster
Create pages, add and style elements, and use theme variables to stay consistent. Build through the project sidebar; define CSS variables in the theme editor to speed mastery.
Want to learn more about Nordcraft?
Ready to dive deeper into everything Nordcraft can do? Explore tutorials, guides, and tips to make the most of your creative playground. Connect with our friendly and supportive community to access all the resources you need to master the Nordcraft editor and create your best work yet.